import React, { Component } from 'react';
import { connect } from 'dva';
import { Form, Button, Input, Icon, message, Select } from 'antd';
import styles from './Login.less';
import request from '@/utils/request';
import xsxImg from './../../images/cenbg.jpg'
const FormItem = Form.Item;
const Option = Select.Option;

@connect(({ login, loading }) => ({
  login,
  submitting: loading.effects['login/login'],//根据 loading.effects 对象判断当前异步加载是否完成
}))
class LoginPage extends Component {
  state = {
    type: 'account',
    autoLogin: true,
    company_name: '',
    company_code: '',
    all_branches:[],

  };

  onTabChange = type => {
    this.setState({ type });
  };
  componentDidMount() {
    const {location} = this.props;
    let {pathname} = location;
    let url_code = pathname.split('/')[3];
    // this.getCompany(url_code);
    const that=this;
    document.addEventListener('keyup',function (e) {
      if(e.keyCode===13){
        that.handleSubmit()
      }
    })
  }
  handleSubmit = (e) => {
    const { location } = this.props;
    const { pathname } = location;
    const company_code = pathname.split('/')[3];
    console.log('company_code', company_code);
    if(e){
      e.preventDefault();
    }

    this.props.form.validateFields({ force: true },
      (err, values) => {
        console.log('values',values);
        if (!err) {
          this.props.dispatch({
            type: `login/login`,
            payload: {
              // company_code:company_code,
              ...values,
              // company_id:values.company_id.key,
            },
            callback: () => {

            },
          });
        }
      },
    );
  };


  render() {
    const { submitting, form } = this.props;
    const { getFieldDecorator } = form;
    return (
      <div className={styles.imageBox}>
        <div className={styles.image} style={{position:'relative',width:'500px',height:'400px'}}>
          <div style={{
            fontSize:'36px',color:'#fff',fontWeight:'bold',width:'100%',textAlign:'center',letterSpacing:'3px',
            position:'absolute',top:'50%',transform:'translate(0,-50%)'}}>
            <span style={{display:'block',color:'#000'}}>德化消防栓</span>
            <span style={{color:'#000'}}>智慧管理平台</span>
          </div>
        </div>
        <div className={styles.main}>
          <div className={styles.title} style={{textAlign:'center',color:"#000",marginTop:'36px'}}>欢迎登陆</div>

          <Form style={{ width: '100%' }} >
            <FormItem
              style={{marginBottom:'4px'}}
              label={(
                <span>
              用户名
            </span>
              )}
            >
              {getFieldDecorator('username', {
                rules: [{
                }],
              })(
                <Input
                  size="large"
                  prefix={<Icon type="user" className={styles.prefixIcon}/>}
                  placeholder="请输入用户名"
                />,
              )}
            </FormItem>
            <FormItem
              style={{marginBottom:'10px'}}

              label={(
                <span>
              密 码
            </span>
              )}>
              {getFieldDecorator('password', {
                rules: [{
                }],
              })(
                <Input
                  size="large"
                  prefix={<Icon type="lock" className={styles.prefixIcon}/>}
                  type="password"
                  placeholder="请输入密码"
                />,
              )}
            </FormItem>
            <FormItem>
              <Button onClick={this.handleSubmit} size="large" style={{borderRadius:'25px',marginTop:'10px'}} loading={submitting} block type="primary" >
                登录
              </Button>
            </FormItem>
          </Form>
        </div>
      </div>

    );
  }
}

export default Form.create()(LoginPage);
